<template>
	<view class="detail">
		<view class="fixbg" :style="{ 'background-image': 'url(' + songDetail.al.picUrl + ')' }"></view>
		<muscihead :title="songDetail.name" color="white"></muscihead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y>
				<!-- 顶部播放区域 -->
				<view class="detail-play" @click="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{ 'detail-play-run': isPlayRotate }"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<!-- 歌词区域 -->
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{ transform: 'translateY(' + (-lyricIndex + 1) * 82 + 'rpx)' }">
						<view
							class="detail-lyric-item"
							v-for="(item, index) in songLyric"
							:key="index"
							:class="{ active: lyricIndex === index }"
						>
							{{ item.lyric }}
						</view>
					</view>
				</view>
				<!-- 推荐区域 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听了</view>
					<view class="detail-like-item" v-for="(item, index) in songSimi" :key="index" @tap="handleToSimi(item.id)">
						<view class="detail-like-img"><image :src="item.album.picUrl"></image></view>
						<view class="detail-like-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70" src="/static/dujia.png"></image>
								<image v-if="item.privilege.maxbr === 999000" src="/static/sq.png"></image>
								{{ item.album.artists[0].name }} - {{ item.name }}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<!-- 评论区域 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item, index) in hotComments" :key="index">
						<view class="detail-comment-img"><image :src="item.user.avatarUrl"></image></view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.time | formatDate }}</view>
								</view>
								<view class="detail-comment-like">
									{{ item.likedCount | formatCount }}
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{ item.content }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import muscihead from '../../components/muscihead/muscihead.vue'

import { songDetail, songLyric, songSimi, songUrl, songComment } from '../../common/api.js'
export default {
	data() {
		return {
			songDetail: {
				al: {
					picUrl: ''
				},
				name: '无该资源'
			},
			songSimi: [],
			hotComments: [],
			songLyric: [],
			lyricIndex: 0,
			bgAudioManager: {},
			iconPlay: 'icon-zanting',
			isPlayRotate: true,
			time: null,
			isLoading: true,
		}
	},
	onLoad(options) {
		this.getMusic(options.songId)
	},
	onUnload() {
		this.cancelLyricIndex()
		// #ifdef H5
		this.bgAudioManager.destroy()
		// #endif
	},
	onHide() {
		this.cancelLyricIndex()
		// #ifdef H5
		this.bgAudioManager.destroy()
		// #endif
	},
	components: {
		muscihead
	},
	methods: {
		async getMusic(songId) {
			// console.log(songId)
			this.$store.commit('NEXT_ID', songId)
			uni.showLoading({
				title: '资源加载中......'
			})
			this.isLoading = true;
			Promise.all([songDetail(songId), songSimi(songId), songComment(songId), songLyric(songId), songUrl(songId)]).then(
				res => {
					// console.log(res)
					if (res[0][1].data.code === 200) {
						if (res[0][1].data.songs.length > 0) {
							this.songDetail = res[0][1].data.songs[0]
						}
					}

					if (res[1][1].data.code === 200) {
						if (res[1][1].data.songs.length > 0) this.songSimi = res[1][1].data.songs
					}

					if (res[2][1].data.code === 200) {
						if (res[2][1].data.hotComments.length > 0) this.hotComments = res[2][1].data.hotComments
						// console.log(this.hotComments)
					}

					if (res[3][1].data.code === 200) {
						let lyric = res[3][1].data.lrc.lyric
						let reg = /\[([^\]]+)\]([^\[]+)/g
						const result = []
						lyric.replace(reg, ($0, $1, $2) => {
							result.push({ time: this.formatTimeToSec($1), lyric: $2 })
						})
						this.songLyric = result
						// console.log(this.songLyric)
					}
					// console.log(res[4][1])
					if (res[4][1].data.code === 200) {
						// #ifdef MP-WEIXIN
						this.bgAudioManager = uni.getBackgroundAudioManager()
						this.bgAudioManager.title = this.songDetail.name
						// #endif

						// #ifdef H5
						this.bgAudioManager = uni.createInnerAudioContext()
						this.iconPlay = 'icon-bofang'
						this.isPlayRotate = false
						// #endif

						this.bgAudioManager.src = res[4][1].data.data[0].url || ''
						this.listenLyricIndex()
						this.bgAudioManager.onPlay(() => {
							this.iconPlay = 'icon-zanting'
							this.isPlayRotate = true
							this.listenLyricIndex()
						})
						this.bgAudioManager.onPause(() => {
							this.iconPlay = 'icon-bofang'
							this.isPlayRotate = false
							this.cancelLyricIndex()
						})
						this.bgAudioManager.onEnded(() => {
							this.getMusic(this.$store.state.nextId)
						})
						if (this.bgAudioManager.src === '') {
							uni.showToast({
								title: '抱歉，暂无该资源......'
							})
							setTimeout(() => uni.hideToast(), 2000)
						}
					}
					this.isLoading = false;
					uni.hideLoading()
				}
			)
		},
		formatTimeToSec(value) {
			const arr = value.split(':')
			//toFiexed()返回的是类型是字符串
			return parseFloat(arr[0] * 60) + parseFloat(arr[1]).toFixed(1) * 1
		},
		handleToPlay() {
			if (this.bgAudioManager.paused) {
				this.bgAudioManager.play()
			} else {
				this.bgAudioManager.pause()
			}
		},
		listenLyricIndex() {
			clearInterval(this.time)
			const length = this.songLyric.length
			this.time = setInterval(() => {
				const currentTime = this.bgAudioManager.currentTime
				for (let i = 0; i < length; i++) {
					if (currentTime > this.songLyric[length - 1]) {
						this.lyricIndex = length - 1
						break
					}

					if (currentTime > this.songLyric[i].time && currentTime < this.songLyric[i + 1].time) {
						this.lyricIndex = i
					}
				}
				// console.log(this.lyricIndex)
			}, 300)
		},
		cancelLyricIndex() {
			clearInterval(this.time)
		},
		handleToSimi(songId) {
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
			this.getMusic(songId)
		}
	}
}
</script>

<style scoped lang="less">
.detail-play {
	position: relative;
	width: 580rpx;
	height: 580rpx;
	background: url(~@/static/disc.png);
	background-size: cover;
	margin: 214rpx auto 0;
	image {
		position: absolute;
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}
	.detail-play-run {
		animation-play-state: running;
	}
	@keyframes move {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	text {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: #fff;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	view {
		position: absolute;
		width: 230rpx;
		height: 360rpx;
		background: url('~@/static/needle.png');
		left: 80rpx;
		right: 0;
		top: -200rpx;
		margin: 0 auto;
		background-size: cover;
	}
}
.detail-lyric {
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	color: #6f6e73;
	overflow: hidden;
	.detail-lyric-wrap {
		transition: 0.5s;
	}
	.detail-lyric-item {
		height: 82rpx;
		&.active {
			color: #fff;
		}
	}
}
.detail-like {
	margin: 0 30rpx;
	.detail-like-head {
		font-size: 32rpx;
		color: white;
		margin: 50rpx 0;
	}
	.detail-like-item {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
		.detail-like-img {
			width: 82rpx;
			height: 82rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.detail-like-song {
			flex: 1;
			color: #c6c6bf;
			view:nth-child(1) {
				font-size: 28rpx;
				color: #fff;
				margin-bottom: 12rpx;
			}
			view:nth-child(2) {
				font-size: 22rpx;
			}
			image {
				width: 26rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}
		text {
			font-size: 50rpx;
			color: #c6c6bf;
		}
	}
}
.detail-comment {
	margin: 0 30rpx;
	.detail-comment-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}
	.detail-comment-item {
		display: flex;
		margin-bottom: 28rpx;
		.detail-comment-img {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 18rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.detail-comment-content {
			flex: 1;
			.detail-comment-title {
				display: flex;
				justify-content: space-between;
				color: #cbcacf;
				.detail-comment-name {
					view:nth-child(1) {
						font-size: 26rpx;
					}
					view:nth-child(2) {
						font-size: 20rpx;
					}
				}
				.detail-comment-like {
					font-size: 28rpx;
				}
			}
			.detail-comment-text {
				font-size: 28rpx;
				line-height: 40rpx;
				margin-top: 20rpx;
				color: #fff;
				border-bottom: 1px solid #e0e0e0;
				padding-bottom: 40rpx;
			}
		}
	}
}
</style>
